<template>
  <div class="picturePosition">
    <informationCard title="参与评分专家" :data="expertScoring.participateTotal" unit="个" :imgUrl="icon1" :backUrl="back1"/>
    <informationCard title="参与打分标段数" :data="expertScoring.participateSection" unit="个" :imgUrl="icon2" :backUrl="back2"/>
    <informationCard title="红色预警人数" :data="expertScoring.redEarlyWarning" unit="个" :imgUrl="icon3" :backUrl="back3"/>
    <informationCard title="黄色预警人数" :data="expertScoring.yellowEarlyWarning" unit="个" :imgUrl="icon4" :backUrl="back4"/>
  </div>
</template>

<script setup>
  import informationCard from '../components/information-card.vue';
  import icon1 from '../components/icons/ExpertScore/icon1.svg';
  import back1 from '../components/icons/ExpertScore/back1.svg';
  import icon2 from '../components/icons/ExpertScore/icon2.svg';
  import back2 from '../components/icons/ExpertScore/back2.svg';
  import icon3 from '../components/icons/ExpertScore/icon3.svg';
  import back3 from '../components/icons/ExpertScore/back3.svg';
  import icon4 from '../components/icons/ExpertScore/icon4.svg';
  import back4 from '../components/icons/ExpertScore/back4.svg';
  import { onMounted, toRefs, ref } from 'vue';

  const props = defineProps({
    sourceData:{
      type: Object,
      default: () => ({})
    }
  })

  const { sourceData } = toRefs(props);
  const expertScoring = ref({
    participateTotal: '-',
    participateSection: '-',
    redEarlyWarning: '-',
    yellowEarlyWarning: '-',
  })

  onMounted(() => {
    if(sourceData.value && Object.keys(sourceData.value).length > 0) {
      expertScoring.value = sourceData.value;
    }
  })
</script>

<style lang="less" scoped>
.picturePosition {
  position: relative;
  width: 100%;
  display: flex;
  flex: 1;
  justify-content: space-around;
}
</style>